<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: qinfeng
  Date: 2021/10/1
  Time: 14:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>选择地址</title>
    <link rel="stylesheet" href="/mi/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" rel="icon" href="/mi/css/cart/settlement_cart.css" type="text/css" />
    <link rel="stylesheet" href="/mi/plugins/layui-v2.6.8/layui/css/layui.css">
    <style>
        #editAddress{
            color: rgb(255, 103, 82);
            display: none;
        }
    </style>
</head>
<body>
<div id="addPlace" style="width: 1180px; margin: auto">
<c:forEach items="${addressList}" var="c" varStatus="xh">
    <div class="middler-nav-two" onmouseover="showEdit(this)" onmouseout="hideEdit(this)"  style="cursor:pointer;padding: 20px;margin-bottom: 20px; margin-right: 15px ;position:relative; width:280px;height:180px;padding: 0 24px;float:left; border:1px solid rgb(222, 222, 222)">
        <div class="name">
            ${c.userName}
            <span style="float: right">${c.userZipcode}</span>
        </div>
        <div style="margin-top: 10px;margin-bottom: 10px;">
            ${c.userPhone}
        </div>
        <div style="margin-top: 10px;margin-bottom: 10px;">
            ${c.userAddress}
        </div>
        <div style="position: absolute;bottom: 20px; right: 20px; float: right">
            <input id="editAddress"  onclick="updateAddress(${c.addressId}, ${c.userId},'${c.userName}', '${c.userPhone}', '${c.userAddress}', ${c.userZipcode})" type="button" style="background-color: white; border: 0px" value="修改" data-toggle="modal" data-target="#editModal" >
        </div>
        <input type="hidden" name="indexAddressId" value="${c.addressId}">
<%--        <input type="hidden" name="userId" value="${c.userId}">--%>
<%--        <input type="hidden" name="userName" value="${c.userName}">--%>
<%--        <input type="hidden" name="userPhone" value="${c.userPhone}">--%>
<%--        <input type="hidden" name="userAddress" value="${c.userAddress}">--%>
<%--        <input type="hidden" name="userZipCode" value="${c.userZipcode}">--%>
    </div>
</c:forEach>
</div>

<div class="myModal">
    <input type="hidden" id="addressId2" value="">
    <input type="hidden" id="userId2" value="">
    <div class="ak modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"  style="margin-top: 100px;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">选择收货地址</h4>
                </div>

                <div class="modal-body" style="font-size: 26px;margin:auto;text-align: center;">
                    <div class="row">


                        <div class="col-md-6">
                            <%--                            <input id="name_tip"  type="hidden" >--%>
                            <input style="margin-top: 10px" id="userName2" placeholder="姓名" class="form-control" tabindex="0" data-toggle="popover"  data-placement="top" data-trigger="focus" data-content="用户名为空">
                        </div>



                        <div class="col-md-6">
                            <%--                            <input  type="hidden" tabindex="0" id="phone_tip"  data-toggle="popover" data-placement="top" data-trigger="focus" data-content="手机号不能为空">--%>
                            <input style="margin-top: 10px" id="userPhone2" class="form-control" placeholder="电话号" tabindex="0"   data-toggle="popover" data-placement="top" data-trigger="focus" data-content="手机号不能为空" >
                        </div>
                    </div>



                    <div class="row" style="margin-top: 14px ">
                        <div class="layui-inline" style="padding-left: 15px">
                            <form class="layui-form layui-form-pane" action="javascript:;">
                                <div class="layui-form-item" id="addressDiv">
                                    <div class="layui-input-inline" style="width: 183px;font-size: 14px; rgb(153, 153, 153)">
                                        <select name="P1" lay-filter="province" id="province2">
                                            <option></option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 183px;font-size: 14px; color: rgb(153, 153, 153)">
                                        <select name="C1" lay-filter="city" id="city2">
                                            <option></option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 183px;font-size: 14px;rgb(153, 153, 153)">
                                        <select name="A1" lay-filter="area" id="area2">
                                            <option></option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>




                    <div style="margin: -5px auto 14px auto;">
                        <%--                        <input  type="hidden" tabindex="100" id="address_tip"  data-toggle="popover" data-placement="top" data-trigger="focus" data-content="手机号不能为空">--%>
                        <textarea id="userAddress2" class="form-control" rows="3" placeholder="详细地址"  tabindex="100" data-toggle="popover" data-placement="top" data-trigger="focus" data-content="详细地址长度不对, 最小为5个字, 最大32个字"></textarea>
                    </div>

                    <div>
                        <input id="userZipcode2" class="form-control" placeholder="地址邮编" value="">
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal" style="background-color: rgb(176, 176, 176); color: white;">取消</button>
                    <button type="button" class="btn" style="background-color: rgb(242, 88, 7); color: white;" onclick="editMyAddress()">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>




<script type="text/javascript"  src="/mi/plugins/layui-v2.6.8/layui/layui.js"></script>
<script type="text/javascript"  src="/mi/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/mi/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

<script type="text/javascript" src="/mi/js/cart/select.js"></script>
<script type="text/javascript" src="/mi/js/cart/pca.js"></script>



<script>
    let addressId2 = document.getElementById("addressId2");
    let userId2 = document.getElementById("userId2");
    let userName2 = document.getElementById("userName2");
    let userPhone2 = document.getElementById("userPhone2");
    let province2 = document.getElementById("province2");
    let city2 = document.getElementById("city2");
    let area2 = document.getElementById("area2");
    let userAddress2 = document.getElementById("userAddress2");
    let userZipcode2 = document.getElementById("userZipcode2");
    //当用户点击确认时, 去数据库更新地址表的信息
    function editMyAddress(){
        $('#editModal').modal('hide');
        $('.modal-backdrop').remove();
        $.post("/mi/cart/reviseAddress",{addressId:addressId2.value, userId: userId2.value, userName:userName2.value, userPhone:userPhone2.value, userAddress: userAddress2.value, userZipcode:userZipcode2.value},
            function () {
                $("#outer").load("/mi/cart/chose_address");
            }
        )
    }
    // $('#myModal').modal('hide');
    document.getElementById("modalFuck").style.paddingRight = "0px";

    //当用户点击修改时, 把当前的信息放入到模态框.
    function updateAddress(addressId, userId, userName, userPhone, userAddress, userZipCode){
        addressId2.value = addressId;
        userId2.value = userId;
        userName2.value = userName;
        userPhone2.value = userPhone;
        // userPhone2.placeholder = userPhone;
        userAddress2.value = userAddress;
        userZipcode2.value = userZipCode;


    }

    //鼠标移动到每个地址的时候, 促发事件, 出现修改按钮, 边框变色
    let middler_nav_two = document.getElementsByClassName("middler-nav-two");
    for(let i = 0; i < middler_nav_two.length; i++){
        middler_nav_two[i].onclick = function () {
            for(let i = 0; i < middler_nav_two.length; i++){
                middler_nav_two[i].style.border = "1px solid rgb(222, 222, 222)";
                middler_nav_two[i].removeAttribute("index");
                middler_nav_two[i].children[3].children[0].style.display = "none"
            }
            this.style.border = "1px solid rgb(255, 103, 0)";
            this.children[3].children[0].style.display = "block"
            this.setAttribute("index", "true");
        }
    }
    function showEdit(obj) {
        obj.children[3].children[0].style.display = "block"
    }
    function hideEdit(obj) {
        if(obj.getAttribute("index") != "true")
            obj.children[3].children[0].style.display = "none"
    }






</script>
</body>
</html>
